<template>
	<div class="distpicker">
		 <div class="modal-backdrop" @click="close">
        <div class="modal"  @click.stop>
          <div class="modal-header">
                <slot name="header">
                <h3 class="title">请选择</h3>
                <div class="close" @click="close">x</div>
                </slot>
            </div>
            <div class="modal-body">
                <slot name="body">
                	<v-distpicker type="mobile" @selected='selected' v-show="addInp">
	               </v-distpicker>
               	<div class="mask" v-show="mask"></div>
                </slot>
            </div>            
        </div>
    </div>
	</div>
</template>

<script>
import VDistpicker from 'v-distpicker'
export default {
	name: 'distpicker',
	components: { VDistpicker },
	data() {
		return {
			city: '请选择',
			code:'',
			addInp: true,
			mask: true
		}
	},
	created() {

	},
	mounted() {

	},
	methods: {
		/*toAddress() {
			this.mask = true;
			this.addInp = true;
		},*/
		// 省市区三级联动
		selected(data) {
			//this.mask = false;
			//this.addInp = false;			
			//this.city = data.province.value + ' ' + data.city.value + ' ' + data.area.value
			//this.code = data.province.code + ' ' + data.city.code + ' ' + data.area.code
			this.$emit('receive',data)
			this.$emit('close',false);
		},
		close() {
			this.$emit('close',false);
		}
	  }
	}
</script>

<style scoped>
	.distpicker{
 	width:100%;
 }
 .distpicker-address-wrapper{
 	font-size: 28px;
 	color: #000000;
 }
 .modal-backdrop {
	 	position: absolute;
	 	top: 0;
	 	right: 0;
	 	bottom: 0;
	 	left: 0;
	 	z-index: 88;
	 	background-color: rgba(0, 0, 0, .3);
	 	display: flex;
        justify-content: center;
        align-items: center; 
	 }
	 
	 .modal {
	 	background-color: #fff;
        box-shadow: 2px 2px 20px 1px;
        border-top-right-radius: 22px;
        border-top-left-radius: 22px;
        overflow-x:auto;
        display: flex;
        flex-direction: column;
	 	position: fixed;
	 	top: 2.5rem;
	 	bottom: 0;
	 	left: 0;
	 	right: 0;
	 	width: 100%;
	 }
	 .modal-header {
	 	display: flex;
	 	width: 100%;
	 	height: 100px;
	 	border-bottom: 1px solid gainsboro;
	 	background: #FFFFFF;
	 	position: fixed;
	 	left: 0;
	 	z-index: 88;
	 }
	 
	 .title {
	 	flex: 1;
	 	text-align: center;
	 	line-height: 105px;
	 }
	 
	 .close {
	 	position: absolute;
	 	right: 35px;
	 	font-size: 44px;
	 	line-height: 100px;
	 	color: dimgrey;
	 }
	 
	 .modal-body {
	 	overflow-y: auto;
	 	margin-top: 120px;
	 }
</style>